<template>
    <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="编号" prop="id">
          <el-input v-model="formData.id" placeholder="请输入类目编号" clearable />
        </el-form-item>
        <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入类目名称" clearable />
        </el-form-item>
        <el-form-item label="批量查询">
                <el-input v-model="formData.ids" placeholder="请输入类目名称" clearable />
            </el-form-item>
       
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>


    <el-table :data="tableData" style="width: 100%">
        <el-table-column  prop="id" label="编号" width="90" />
        <el-table-column prop="name" label="商品名称" width="100" />
        <el-table-column prop="img" label="商品图片" width="120" >
            <template #default="scope">
                <img :src="scope.row.img" width="50" height="50">
            </template>
        </el-table-column>
        <el-table-column prop="seq" label="排序" width="120" />
        <el-table-column prop="price" label="商品价格" width="120" />
        <el-table-column prop="categoryId" label="父目录ID" width="100" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleClick(scope.row)">
              下线
            </el-button>
            <el-button link type="primary" size="small"  @click="EditClick(scope.row)" >修改</el-button>
          </template>
        </el-table-column>
      </el-table>
       <el-pagination background layout="prev, pager, next" :total="pageData.total" 
       :page-size="pageData.pageSize"  @current-change="currentChange" />
</template>
<script setup lang="ts">
import { categoryApi,ProductApi } from '@/api';
import { ElMessage, ElMessageBox } from 'element-plus'
//import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();  //跳转页面用的
//const route = useRoute();  // 在路由跳转的时候传递参数


const tableData=ref([])
const formData = reactive({
    name: '',
    id: '',
    ids:[]
})

//分页
const pageData = reactive({
    total:0, //总条数
    pageSize: 3, //每页的数据
    pageNum:1 // 第几页
})
const categoryData = () => { 
    let id = formData.id === "" ? undefined : formData.id
    let name = formData.name === "" ? undefined : formData.name
     let ids = formData.ids[0] === 0 ? undefined : formData.ids
    ProductApi.select.call({
        id: id, name: name, ids: ids,
        pageNum: pageData.pageNum,
        pageSize: pageData.pageSize
    }).then((res: any) => { 
       // console.log(res);
        tableData.value = res.items
        pageData.total=res.total
        
    })
}

onMounted(() => { 

    categoryData()
    // axios({
    //     method: "GET",
    //     url:'http://localhost:8080/api/category'
    // }).then(res => { 
    //     console.log(res);
        
    // })
})

const onSubmit = () => {
    //console.log('submit!')
    categoryData()
}
//删除的函数
const handleClick = (row:any) => {
    ElMessageBox.confirm(
    '您确定要对 '+row.name+" 下线吗 ？",
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
      .then(() => {
        ProductApi.delete.call({ id: row.id }).then((res: any) => { 
          ElMessage({
              type: 'success',
              message: '下线成功',
            })
            categoryData()
        })
     .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消下线操作',
          })
        })
    })
    

}

//修改
const EditClick = (row:any) => { 
  router.push({ name: "category-edit", query: {id:row.id} })
}


const currentChange = (num: number) => {
    pageData.pageNum = num
  //回调一下列表函数
  categoryData()
}
</script>
<style scoped>


</style>